<template>
    <div class="third-comp">
        <div class="left-card">
            <el-card>
                <template #header>
                    <h2>关键词搜索</h2>
                </template>
                <template #default>
                    <div class="main">
                        <div class="charts">
                            <div class="left-chart">
                                <div class="title">搜索用户量</div>
                                <div class="number">{{userNum}}</div>
                                <v-chart :option="userOption"></v-chart>
                            </div>
                            <div class="right-chart">
                                <div class="title">搜索量</div>
                                <div class="number">{{searchNum}}</div>
                                <v-chart :option="searchOption"></v-chart>
                            </div>
                        </div>
                        <div class="table" >
                            <el-table :data="pageData">
                                <el-table-column label="排名" prop="rank"></el-table-column>
                                <el-table-column label="关键词" prop="keyWord"></el-table-column>
                                <el-table-column label="总搜索量" prop="totalSearch"></el-table-column>
                                <el-table-column label="搜索用户量" prop="totalUser"></el-table-column>
                            </el-table>
                            <el-pagination 
                                background 
                                layout="prev, pager, next" 
                                :page-size="6"
                                :total="tableData.length"
                                @current-change="handleCurrentChange" />
                        </div>
                    </div>
                </template>
            </el-card>
        </div>
        <div class="right-card">
            <el-card shadow="hover">
                <template #header>
                    <h2>分类销售排行</h2>
                    <el-radio-group v-model="type" @change="handleChange">
                        <el-radio-button label="品类" value="category"></el-radio-button>
                        <el-radio-button label="商品" value="product"></el-radio-button>
                    </el-radio-group>
                </template>
                <template #default>
                    <v-chart :option="categoryOption"></v-chart>
                </template>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted,computed } from 'vue'

import { getKeywordsData,getCategoryData } from '@/api/index.js';

const tableData = ref([])
const categoryData = ref([])
const page = ref(1) //当前页码
const userOption = ref({})
const searchOption = ref({})
const categoryOption = ref({})
const type = ref('category')

const pageData = computed(()=>{
    //根据当前页面，计算当前页要显示的数据
    const start = (page.value-1)*6
    const end = start + 6

    return tableData.value.slice(start,end)
})

const userNum = computed(()=>{
    return tableData.value.reduce((acc,cur) =>acc + cur.totalUser,0 )
})

const searchNum = computed(()=>{
    return tableData.value.reduce((acc,cur) =>acc + cur.totalSearch,0 )
})
const handleCurrentChange = (value)=>{
    page.value = value
}

const renderLineChart = (chartOption,data) =>{
    chartOption.value = {
        xAxis: {
            type: 'category',
            show:false,
            boundryGap: false,
        },
        yAxis: {
            show:false,
        },
        grid: {
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
        },
        series: [
            {
                type: 'line',
                data: data,
                areaStyle: {
                    color: 'lightgreen',
                },
                itemStyle: {
                    opacity: 0,
                },
                smooth: true,
            }
        ]

    }
}

const renderCategoryChart = (data) => {
  const _data = data.map((item) => {
    return {
      ...item,
      // 添加一个name属性
      name: `${item.title} | ${item.value}`,
    }
  })
  const total = data.reduce((acc, cur) => acc + cur.value, 0)
  categoryOption.value = {
    title: [
      {
        text: '品类分布',
        textStyle: {
          fontSize: 14,
          color: '#666',
        },
      },
      {
        text: '累计订单量',
        subtext: total,
        textAlign: 'center',
        x: '40%',
        y: '45%',
        textStyle: {
          fontSize: 14,
          color: '#999',
        },
        subtextStyle: {
          fontSize: 28,
          color: '#333',
        },
      },
    ],
    tooltip: {
      formatter(params) {
        // console.log(params)
        // seriesName要求series中必须有name属性
        const res = `
          ${params.seriesName}<br>
          ${params.marker} ${params.data.title} <br>
          ${params.marker} 销售额: ${params.data.value} <br>
        `
        return res
      },
    },
    legend: {
      // legend要求series的data数组中对象必须有name属性
      orient: 'vertical',
      left: '80%',
      top: 'top',
      textStyle: {
        color: '#888',
      },
    },
    series: {
      type: 'pie',
      name: '品类分布',
      data: _data,
      radius: ['45%', '60%'], // 饼图的半径[内半径，外半径]
      center: ['40%', '50%'], // 饼图的中心坐标
      label: {
        position: 'outside',
        formatter(params) {
          // console.log(params)
          return params.data.title
        },
      },
      itemStyle: {
        borderWidth: 8,
        borderColor: '#fff',
      },
    },
  }
}

const handleChange = () => {
  if (type.value === 'category') {
    renderCategoryChart(categoryData.value.data1)
  } else if (type.value == 'product') {
    renderCategoryChart(categoryData.value.data2)
  }
}

onMounted(async () => {
  tableData.value = await getKeywordsData()
  categoryData.value = await getCategoryData()
  // console.log(tableData.value)

  // 由于接口返回的数据格式不是我们希望, 因此需要对原始数据进行加工处理
  const userData = tableData.value
    .map((item) => item.totalUser)
    .slice(0, 10)
    .reverse()

  const searchData = tableData.value
    .map((item) => item.totalSearch)
    .slice(0, 10)
    .reverse()

  renderLineChart(userOption, userData)
  renderLineChart(searchOption, searchData)

  renderCategoryChart(categoryData.value.data1)
})

</script>

<style lang="scss" scoped>
.third-comp {
  margin-top: 20px;
  display: flex;
  gap: 20px;
  .left-card {
    flex: 1;
    h2 {
      font-weight: 600;
    }
    :deep(.el-card__body) {
      min-height: 502px;
      .main {
        padding: 20px;
        .charts {
          display: flex;
          gap: 20px;
          .left-chart,
          .right-chart {
            flex: 1;
            .title {
              font-size: 14px;
              color: #727171;
            }
            .number {
              margin-top: 10px;
              font-size: 20px;
              font-weight: 600;
            }
            // v-chart设置的默认样式
            .echarts {
              height: 50px;
            }
          }
        }
        .table {
          .el-pagination {
            margin-top: 16px;
            display: flex;
            justify-content: end;
          }
        }
      }
    }
  }
  .right-card {
    flex: 1;
    :deep(.el-card__header) {
      position: relative;
      h2 {
        font-weight: 600;
      }
      .el-radio-group {
        position: absolute;
        top: 10px;
        right: 20px;
      }
    }
    :deep(.el-card__body) {
      height: 502px;
    }
  }
}
</style>